<template>
	<view class="user">
		<u-navbar-home :bgColor="bgColor">
			<template #left>
				<view class="title u-flex-y-center" style="color: #fff">
					<u-image :src="logo" width="80rpx" height="80rpx"></u-image>
					<view style="width: 10rpx"> </view>
					山西饲草收储交易中心
				</view>
			</template>
		</u-navbar-home>
		<!-- @click="usertap" -->
		<view class=" tcard" @click="usertap">
			<view class="u-flex-xy-center avatar">
				<u-avatar :src="user.avatar" size="60"></u-avatar>
				<view class="text" v-if="!islogin">未登陆</view>
			</view>
			<u--form v-if="islogin" labelPosition="left" :model="user" ref="uForm">
				<u-form-item label="昵称" prop="nickname" borderBottom>
					<view class="u-flex" style="padding-right: 100rpx; flex: 1">
						<u--input v-model="user.nickname" border="none"></u--input>
						<view class="sex u-flex-xy-center" @click="show = !show">
							{{ user.sex == 0 ? "男" : "女" }}
						</view>
					</view>
				</u-form-item>
				<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>

				<u-form-item label="手机号" prop="nickname" borderBottom>
					<view class="" style="padding-right: 20rpx; flex: 1">
						{{ user.mobile.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") }}
					</view>
				</u-form-item>
				<u-form-item label="地址" prop="sex" borderBottom>
					<view class="" style="padding-right: 20rpx; flex: 1;height: 40rpx;"
						@click="showAreaTree(user.areaId)">
						{{findAreaByCode(areaTree,user.areaId)||'请选择'}}

					</view>
				</u-form-item>
				<view style="padding: 40rpx" class="u-flex-xy-center">
					<u-button type="success" shape="circle" :customStyle="btnstyle" :loading="loading"
						@click="onedit">保存信息</u-button>
				</view>
			</u--form>
		</view>
		<!-- getFavoritePage -->
		<!-- 用户信息 - 开始 -->
		<view class="list-box u-flex" >
			<view class="item u-flex-xy-center" @click="loginGoPage('/pages/my/favorite/favorite')">
				<view class="left u-flex-y-center">
					<view class="img-box">
						<u--image :showLoading="true" :src="sc" width="40rpx" height="40rpx"></u--image>
					</view>
					<view class="text"> 我的收藏 </view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#808080" size="16"></u-icon>
				</view>
			</view>
			<view class="item u-flex-xy-center"  @click="loginGoPage('/pages/my/favorite/favorite')">
				<view class="left u-flex-y-center">
					<view class="img-box">
						<u--image :showLoading="true" :src="qd" width="40rpx" height="40rpx"></u--image>
					</view>
					<view class="text"> 每日签到 </view>
				</view>
				<view class="right">
					<u-icon name="arrow-right" color="#808080" size="16"></u-icon>
				</view>
			</view>
		</view>
		<area-tree ref="areaTree" :areaTree="areaTree" v-model="user.areaId"></area-tree>
		<!-- <levelType></levelType> -->
		<release ref="release" v-show="islogin"></release>
		<!-- v-if="islogin" -->
		<!-- 列表菜单 - 结束 -->

		<tabbar></tabbar>
	</view>
</template>

<script>
	import {
		getUser,
		updateUser,
		getAreaTree
	} from "@/api/user.js";

	import qd from "@/static/my/qd.png";
	import sc from "@/static/my/sc.png";
	import logo from "@/static/logo.png";
	import {
		getAccessToken,
		removeToken
	} from "@/utils/auth";
	import release from "./components/release.vue";
	import areaTree from "./components/areaTree.vue"
	export default {
		components: {
			release,
			areaTree
		},
		data() {
			return {
				bgColor: "#39C03E",
				logo,
				qd,
				sc,
				
				userInfo: {},
				user: {},
				list: [{
						title: "我的发布",
						src: logo,
						url: "/pages/couponEffect/couponEffect",
					},
					{
						src: sc,
						title: "我的收藏",
						url: "/pages/couponVerify/couponVerify",
					},
				],

				loading: false,
				show: false,
				islogin: false,
				columns: [
					["男", "女"]
				],
				btnstyle: {
					width: "300rpx",
				},
				areaTree: []
			};
		},
		created() {},
		onShow() {
			// this.$refs.release && 
			this.init();
		},
		mounted() {
			// this.init();
		},
		onReachBottom() {
			this.releaseGetdata();
		},
		methods: {
			loginGoPage(url){
				if (!this.islogin) {
					uni.navigateTo({
						url: "/pages/login/login",
					});
					return
				}
				uni.navigateTo({
						url: url,
					});
			},
			showAreaTree(targetCode) {
				this.$refs.areaTree.showPickerFn(targetCode);
			},
			findAreaByCode(areaTree, targetCode) {
				let province = null;
				let city = null;
				let district = null;

				for (const provinceNode of areaTree) {
					if (provinceNode.children) {
						for (const cityNode of provinceNode.children) {
							if (cityNode.children) {
								for (const districtNode of cityNode.children) {
									if (districtNode.id === targetCode) {
										province = provinceNode.name;
										city = cityNode.name;
										district = districtNode.name;
										return `${province} ${city} ${district}`;
									}
								}
							}
						}
					}
				}

				return ''; // 如果未找到对应编码
			},
			async init() {
				let areaTree = await getAreaTree();
				this.areaTree = areaTree.data
				if (getAccessToken()) {
					try {
						let data = await getUser();
						if (data?.data) {
							this.user = data.data;
							this.islogin = true;
							this.$refs.release && this.$refs.release.init();
						} else {
							removeToken();
						}
					} catch {
						removeToken();
					}
				} else {
					removeToken();
					this.islogin = false;
					this.user = {
						// id: 286,
						// nickname: "张健",
						// avatar: "",
						// mobile: "15669054328",
						// sex: 0,
						// point: 0,
						// experience: 0,
						// level: null,
						// brokerageEnabled: null,
					};
				}

				// leftIcon
			},
			usertap() {
				if (!this.islogin) {
					uni.navigateTo({
						url: "/pages/login/login",
					});
				}
			},
			/* 跳转页面 */
			goPage(item) {
				uni.navigateTo({
					url: item.url,
				});
			},
			confirm(arr) {
				this.user.sex = arr.indexs[0];
				this.show = false;
			},
			async cancel() {
				this.show = false;
			},
			async onedit() {
				this.loading = true;
				await updateUser(this.user);
				this.loading = false;
				this.$u.toast("修改成功");
			},
			async releaseGetdata() {
				this.$refs.release && this.$refs.release.getData();
			},
		},
	};
</script>

<style>
	page {
		background: #f4f4f4;
	}
</style>

<style lang="scss" scoped>
	// .cygn {
	//   height: 40rpx;
	//   padding-left: 20rpx;
	//   font-size: 28rpx;
	//   font-weight: bold;
	// }

	.list-box {
		padding: 20rpx;
		justify-content: space-between;

		.item {
			display: flex;
			background: #fff;
			width: 345rpx;
			height: 100rpx;
			border-radius: 20rpx;
			padding: 20rpx;

			.left {
				flex: 1;
				width: 0;
				font-weight: bold;

				.img-box {
					margin-right: 10rpx;
				}
			}
		}
	}

	.user {
		background: linear-gradient(to bottom,
				#39c03e 0,
				#39c03e 188rpx,
				#f4f4f4 40vh);
		min-height: 100vh;

		.tcard {
			margin: 20rpx;

			.avatar {
				// height: 200rpx;
				padding: 60rpx 0;
				flex-direction: column;

				.text {
					font-size: 28rpx;
					color: #333;
					margin-top: 10rpx;
					font-weight: bold;
				}
			}

			.sex {
				width: 48rpx;
				height: 48rpx;
			}
		}

		// .user-header-image {
		//   width: 100%;
		// }

		// .user-info-box {
		//   background: #ffffff;
		//   padding: 30rpx;
		//   margin: -160rpx 20rpx 20rpx 20rpx;
		//   position: relative;
		//   border-radius: 20rpx;
		//   display: flex;
		//   align-items: center;

		//   .user-avg {
		//     width: 100rpx;
		//     height: 100rpx;
		//     border-radius: 10rpx;
		//   }

		//   .user-nickname {
		//     margin-left: 20rpx;
		//   }

		//   .user-phone {
		//     margin-left: 20rpx;
		//     font-size: 24rpx;
		//     color: #666666;
		//   }
		// }

		// .user-recharge-wrapper {
		//   background: #ffffff;
		//   border-radius: 20rpx;
		//   padding: 30rpx;
		//   margin: 20rpx;

		//   .user-recharge-box {
		//     display: flex;
		//     align-items: center;
		//     justify-content: space-between;
		//     margin-bottom: 20rpx;

		//     .recharge-info {
		//       .info-title {
		//         color: #333;
		//         font-size: 28rpx;
		//         font-weight: bold;
		//       }

		//       .info-content {
		//         color: #999;
		//         font-size: 24rpx;
		//       }
		//     }

		//     .recharge-button {
		//       // background: #ff4131;
		//       color: #333;
		//       padding: 10rpx 20rpx;
		//       font-size: 22rpx;
		//       border-radius: 50rpx;
		//       flex-shrink: 0;
		//       border: 1rpx solid #dadbde;
		//     }
		//   }

		//   .recharge-user-money {
		//     display: flex;
		//     align-items: center;
		//     justify-content: space-between;
		//     margin-top: 20rpx;
		//     font-size: 26rpx;
		//     color: #333;

		//     .recharge-money {
		//       font-weight: bold;
		//       font-size: 30rpx;
		//     }

		//     .recharge-money::first-letter {
		//       font-size: 22rpx;
		//     }
		//   }
		// }

		// .user-activity-menu {
		//   padding: 30rpx;
		//   margin: 20rpx;
		//   border-radius: 20rpx;
		//   background: #fff;

		//   .menu-item {
		//     display: flex;
		//     align-items: center;
		//     justify-content: space-between;
		//     margin-top: 60rpx;
		//     position: relative;

		//     .left {
		//       display: flex;
		//       align-items: center;

		//       .menu-icon {
		//         width: 40rpx;
		//         height: 40rpx;
		//       }

		//       .menu-name {
		//         font-size: 28rpx;
		//         margin-left: 20rpx;
		//         color: #333;
		//       }
		//     }

		//     .menu-number {
		//       font-size: 30rpx;
		//       color: #666666;
		//       letter-spacing: 2rpx;
		//     }
		//   }

		//   .menu-item:first-child {
		//     margin-top: 0;
		//   }
		// }
	}
</style>